import React, { Component } from 'react'
import { Card, Table, Button, Modal, message } from 'antd'
import Axios from '../../../axios'
import Utils from '../../../utils/Utils'


class HeighTable extends Component {
    state = {
        dataSource_1: []
    }
    params = {
        page: 1
    }
    componentDidMount() {
        this.request()
    }
    request = () => {
        Axios.ajax({
            url: '/user/list',
            data: {
                params: {
                    page: this.params.page
                }
            }
        }).then((res) => {
            if (res.code == '0') {
                this.setState({
                    dataSource_1: res.result.item_list,
                    pagination: Utils.pagination(res, (current) => {
                        this.params.page = current;
                        this.request()
                    })
                })
            }
        })
    }
    handleChange = (pagination, filters, sorter) => {
        console.log('params', pagination, filters, sorter);
    }
    handleClick = (item) => {
        let ids = item.id
        Modal.info({
            title: '提示',
            content: "确定要删除这条数据吗？",
            onOk: () => {
                this.request()  //调用AJAX
                message.success('删除成功');
            },
        })
    }
    render() {
        const dataSource = [{
            id: '1',
            key: '1',
            username: '胡彦斌',
            sex: '1',
            interest: '3',
            birthday: '1998 - 01 - 19',
            age: 31,
            address: '西湖区湖底公园1号',
            time: '9:00'
        }, {
            id: '2',
            key: '2',
            username: '胡彦斌',
            sex: '1',
            interest: '3',
            birthday: '2998 - 02 - 29',
            age: 32,
            address: '西湖区湖底公园2号',
            time: '9:00'
        }, {
            id: '3',
            key: '3',
            username: '胡彦斌',
            sex: '1',
            interest: '6',
            birthday: '3998 - 03 - 39',
            age: 32,
            address: '西湖区湖底公园3号',
            time: '9:00'
        }, {
            id: '4',
            key: '4',
            username: '胡彦斌',
            sex: '1',
            interest: '3',
            birthday: '4998 - 04 - 49',
            age: 32,
            address: '西湖区湖底公园4号',
            time: '9:00'
        }, {
            id: '5',
            key: '5',
            username: '胡彦斌',
            sex: '1',
            interest: '4',
            birthday: '5998 - 05 - 59',
            age: 32,
            address: '西湖区湖底公园5号',
            time: '9:00'
        }, {
            id: '6',
            key: '6',
            username: '胡彦斌',
            sex: '1',
            interest: '5',
            birthday: '6998 - 06 - 69',
            age: 32,
            address: '西湖区湖底公园6号',
            time: '9:00'
        }
        ]
        const columns_1 = [{
            title: 'ID',
            dataIndex: 'id',
            key: 'id',
        }, {
            title: '姓名',
            dataIndex: 'username',
            key: 'username',
        }, {
            title: '性别',
            dataIndex: 'sex',
            key: 'sex',
            render(sex) {
                return (sex == '1' ? '男' : '女')
            }
        },
        {
            title: '爱好',
            key: 'interest',
            dataIndex: 'interest',
            render(interest) {
                let config = {
                    '1': '游泳',
                    '2': '打篮球',
                    '3': '踢足球',
                    '4': '跑步',
                    '5': '爬山',
                    '6': '骑行',
                    '7': '桌球',
                    '8': '麦霸'
                }
                return config[interest]
            }
        }, {
            title: '生日',
            key: 'birthday',
            dataIndex: 'birthday'
        },
        {
            title: '住址',
            dataIndex: 'address',
            key: 'address',
        }, {
            title: '早起时间',
            key: 'time',
            dataIndex: 'time'
        }, {
            title: '操作',
            render: (item) => {
                return <Button type="primary" onClick={() => this.handleClick(item)}>删除</Button>
            }
        }]
        const columns = [{
            title: 'ID',
            dataIndex: 'id',
            key: 'id',
            width: 150,

        }, {
            title: '姓名',
            dataIndex: 'username',
            key: 'username',
            width: 150,
            filters: [{
                text: 'Joe',
                value: 'Joe',
            }, {
                text: 'Jim',
                value: 'Jim',
            }, {
                text: 'Submenu',
                value: 'Submenu',
                children: [{
                    text: 'Green',
                    value: 'Green',
                }, {
                    text: 'Black',
                    value: 'Black',
                }],
            }],
            onFilter: (value, record) => record.username.indexOf(value) === 0,
            sorter: (a, b) => a.username.length - b.username.length,
        }, {
            title: '性别',
            dataIndex: 'sex',
            key: 'sex',
            width: 150,
            render(sex) {
                return (sex == '1' ? '男' : '女')
            }
        },
        {
            title: '爱好',
            key: 'interest',
            dataIndex: 'interest',
            width: 150,
            render(interest) {
                let config = {
                    '1': '游泳',
                    '2': '打篮球',
                    '3': '踢足球',
                    '4': '跑步',
                    '5': '爬山',
                    '6': '骑行',
                    '7': '桌球',
                    '8': '麦霸'
                }
                return config[interest]
            }
        }, {
            title: '生日',
            key: 'birthday',
            width: 150,
            dataIndex: 'birthday'

        },
        {
            title: '住址',
            dataIndex: 'address',
            width: 150,
            key: 'address'
        }, {
            title: '早起时间',
            key: 'time',
            width: 150,
            fixed: 'right',
            dataIndex: 'time'
        }]
        return (
            <div>
                <Card title="头部固定--基础表格">
                    <Table
                        bordered
                        columns={columns}
                        dataSource={this.state.dataSource_1}
                        pagination={this.state.pagination}
                        scroll={{ y: 300 }}
                    >
                    </Table>
                </Card>
                <Card title="右侧固定--基础表格">
                    <Table
                        bordered
                        columns={columns}
                        dataSource={this.state.dataSource_1}
                        pagination={this.state.pagination}
                        scroll={{ x: 1400, y: 400 }}
                    >
                    </Table>
                    <Card title="头部固定--基础表格">
                        <Table
                            bordered
                            columns={columns}
                            dataSource={this.state.dataSource_1}
                            pagination={this.state.pagination}
                            scroll={{ y: 400 }}
                            onChange={this.handleChange}
                        >
                        </Table>
                    </Card>
                    <Card title="操作按钮--基础表格">
                        <Table
                            bordered
                            columns={columns_1}
                            dataSource={dataSource}
                            pagination={false}
                        >
                        </Table>
                    </Card>
                </Card>
            </div>
        )
    }
}
export default HeighTable